<style>
    .simditor-body img.uploading {
        opacity: 0.1;
    }
    .simditor .simditor-body img, .editor-style img{
        max-width: 100%;
    }

</style>
<template>
    <div style="min-height: 343px;">
        <div ref="textarea"></div>
    </div>

</template>
<script>
    Rap.define('', [], function () {
            return {
                name: 'ly-simditor',
                props: {
                    value: "",
                    uploadInfo: {}
                },
                data: function () {
                    return {
                        content: '',
                        show: false
                    }
                },
                watch: {
                    'value': function () {
                        if (this.editor) {
                            var html = this.editor.getValue();
                            if (html != this.value) {
                                this.editor.setValue(this.value + "");
                            }
                        }
                    }
                },
                destroyed: function () {
                    Rap.removeCss('/static/ly/libs/simditor-2.3.26/styles/simditor.css');
                },
                mounted: function () {
                    var simditorConfig = Ly.config().simditor;
                    var me = this;
                    Rap.loadCss('/static/ly/libs/simditor-2.3.26/styles/simditor.css');
                    Rap.insertScript(["/static/ly/libs/jquery-3.4.1.min.js",
                        "/static/ly/libs/simditor-2.3.26/lib/module.js",
                        "/static/ly/libs/simditor-2.3.26/lib/hotkeys.js",
                        "/static/ly/libs/simditor-2.3.26/lib/uploader.min.js",
                        "/static/ly/libs/simditor-2.3.26/lib/simditor.js?v2"]).then(function () {
                        setTimeout(function () {

                            var editor = new Simditor({
                                textarea: me.$refs.textarea,
                                pasteImage: true,
                                cleanPaste: false,
                                toolbar: simditorConfig.toolbar,
                                toolbarFloatOffset:simditorConfig.toolbarFloatOffset ,
                                toolbarFloat:simditorConfig.toolbarFloat,
                                codeLanguages:[],
                                allowedTags: ["a", "abbr", "address", "area", "article", "aside", "audio", "b", "bdi", "bdo", "big", "blockquote", "br", "caption", "center", "cite", "code", "col", "colgroup", "dd", "del", "details", "div", "dl", "dt", "em", "font", "footer", "h1", "h2", "h3", "h4", "h5", "h6", "header", "hr", "i", "img", "ins", "li", "mark", "nav", "ol", "p", "pre", "s", "section", "small", "span", "sub", "sup", "strong", "table", "tbody", "td", "tfoot", "th", "thead", "tr", "tt", "u", "ul", "video", "source", "embed", "iframe", "strike"],
                                allowedAttributes:{		a:      ['target', 'href', 'title', 'class', 'style'],
                                    abbr:   ['title', 'class', 'style'],
                                    address: ['class', 'style'],
                                    area:   ['shape', 'coords', 'href', 'alt'],
                                    article: [],
                                    aside:  [],
                                    audio:  ['autoplay', 'controls', 'loop', 'preload', 'src', 'class', 'style'],
                                    b:      ['class', 'style'],
                                    bdi:    ['dir'],
                                    bdo:    ['dir'],
                                    big:    [],
                                    blockquote: ['cite', 'class', 'style'],
                                    br:     [],
                                    caption: ['class', 'style'],
                                    center: [],
                                    cite:   [],
                                    code:   ['class', 'style'],
                                    col:    ['align', 'valign', 'span', 'width', 'class', 'style'],
                                    colgroup: ['align', 'valign', 'span', 'width', 'class', 'style'],
                                    dd:     ['class', 'style'],
                                    del:    ['datetime'],
                                    details: ['open'],
                                    div:    ['class', 'style'],
                                    dl:     ['class', 'style'],
                                    dt:     ['class', 'style'],
                                    em:     ['class', 'style'],
                                    font:   ['color', 'size', 'face'],
                                    footer: [],
                                    h1:     ['class', 'style'],
                                    h2:     ['class', 'style'],
                                    h3:     ['class', 'style'],
                                    h4:     ['class', 'style'],
                                    h5:     ['class', 'style'],
                                    h6:     ['class', 'style'],
                                    header: [],
                                    hr:     [],
                                    i:      ['class', 'style'],
                                    img:    ['src','data-src', 'alt', 'title', 'width', 'height', 'id', '_src', 'loadingclass', 'class', 'data-latex'],
                                    ins:    ['datetime'],
                                    li:     ['class', 'style'],
                                    mark:   [],
                                    nav:    [],
                                    ol:     ['class', 'style'],
                                    p:      ['class', 'style'],
                                    pre:    ['class', 'style'],
                                    s:      [],
                                    section:['class', 'style'],
                                    small:  [],
                                    span:   ['class', 'style'],
                                    sub:    ['class', 'style'],
                                    sup:    ['class', 'style'],
                                    strong: ['class', 'style'],
                                    table:  ['width', 'border', 'align', 'valign', 'class', 'style'],
                                    tbody:  ['align', 'valign', 'class', 'style'],
                                    td:     ['width', 'rowspan', 'colspan', 'align', 'valign', 'class', 'style'],
                                    tfoot:  ['align', 'valign', 'class', 'style'],
                                    th:     ['width', 'rowspan', 'colspan', 'align', 'valign', 'class', 'style'],
                                    thead:  ['align', 'valign', 'class', 'style'],
                                    tr:     ['rowspan', 'align', 'valign', 'class', 'style'],
                                    tt:     [],
                                    u:      [],
                                    ul:     ['class', 'style'],

                                    video:  ['autoplay', 'controls', 'loop', 'preload', 'src', 'height', 'width', 'class', 'style'],
                                    source: ['src', 'type'],
                                    embed: ['type', 'class', 'pluginspage', 'src', 'width', 'height', 'align', 'style', 'wmode', 'play',  'autoplay','loop', 'menu', 'allowscriptaccess', 'allowfullscreen', 'controls', 'preload'],
                                    iframe: ['src','data-src', 'class', 'height', 'width', 'max-width', 'max-height', 'align', 'frameborder', 'allowfullscreen']
                                },
                                upload: {
                                    url: simditorConfig.upload.url, //文件上传的接口地址
                                    params: null, //键值对,指定文件上传接口的额外参数,上传的时候随文件一起提交
                                    fileKey: simditorConfig.upload.fileKey, //服务器端获取文件数据的参数名
                                    connectionCount: 3,
                                    leaveConfirm: '正在上传文件'
                                }
                            });
                            me.editor = editor;
                            if (me.value) {
                                editor.setValue(me.value + "");
                            }
                            var uploadindex = 0;
                            editor.on('valuechanged', function (content) {
                                setTimeout(function () {
                                    if (uploadindex == 0) {
                                        var html = editor.getValue();
                                        me.$emit('input', html);
                                    }
                                }, 10);
                            });
                            editor.uploader.on('beforeupload', function (e, file) {
                                if( simditorConfig.upload.dataUrl){
                                    $.ajax({
                                        type : "GET",
                                        url : simditorConfig.upload.dataUrl,
                                        async : false,
                                        success : function(rs){
                                            file.params=rs.data;
                                            file.params.file=file.obj;
                                            //文件必须放到最下面
                                            file.fileKey=null;
                                            delete file.obj;
                                            if(rs.host){
                                                file.url=rs.host.replace(/http:|https:/, window.location.protocol);
                                            }
                                        }
                                    });
                                }
                                uploadindex++;
                            });

                            editor.uploader.on('uploadsuccess', function (e, file, mask) {
                                uploadindex--;
                                var img = file.img;
                                if (mask.url) {
                                    img.attr('src', mask.url);
                                    img.css('max-width', '100%');
                                    img.height('auto');
                                    img.removeAttr('height');
                                } else {
                                    img.remove();
                                }
                            });
                            editor.uploader.on('uploaderror', function (e, file, mask) {
                                uploadindex--;
                                var img = file.img;
                                img.remove();
                            });
                        }, 500)

                    });
                }
            }
        }
    )
</script>